【live2D看板娘】为你的网站添加萌萌的二次元板娘,这都拿不下你? |
您所在的位置:网站首页 › live2d 模板 › 【live2D看板娘】为你的网站添加萌萌的二次元板娘,这都拿不下你? |
📋 个人简介
💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜
📝 个人主页:馆主阿牛🔥
🎉 支持我:点赞👍+收藏⭐️+留言📝
📣 系列专栏:前端实用小demo🍁
💬格言:要成为光,因为有怕黑的人!🔥![]() 好久没有分享过有趣的东西了,这次我打算分享一个所有人都无法拒绝的前端小demo。相信好多自己搭建博客的盆友们总喜欢搞一个萌萌的二次元板娘,但基本都是网上引入别人封装好的资源,无法进行小部分修改,那么今天阿牛把我之前搞得可以扩展与修改的live2D板娘分享出来,快拿去装扮到你的博客小站去装x吧! 🍑部分板娘展示哈哈,好看吧!就展示这些模型哦!这些live2D模型都是我在网上(github)上搜集的,着实花了一些时间!其实博主最喜欢的模型还是第二个橙系萌娘,这个还有酥酥的声音哦!博主对她简直爱死了! 🍑如何在你的网站中加入她们 🍒本地运行因为代码中涉及live2D静态资源,所以以html文件的方式肯定无法运行它,因为会跨域哦!那么我坚持要在vscode中运行看看效果怎么办,没有关系,vscode中有个叫LiveServer的插件可以帮助你以http通信的方式运行当前代码,这样就可以避免跨域了哦! 看了上面四个模型你一定很激动吧,那么现在我就教你如何在你的网站中加入他们。 到此你就可以使用了! 🍑自定义部分内容当然,我长篇大论难道只是为了引入她吗,大可不必,网上有封装好的,一行代码引入不香吗!当然是为了更好的修改源代码,真正弄成“我们自己的”! 还记得当时在网上找到比较合适的这个资源时,各种报错,当时,博主的前端学的很差或者说基本没咋学,所以令我记忆犹新的是当时花了三天时间才把他搞好,因为喜欢,所以坚持,幸好成功了!直至今日,博主依旧在博客小站或者一些合适的小项目中使用它! 那么我们来看看有哪些地方可以修改吧! 🍒修改板娘的位置与大小
其中window.open中放你的csdn主页链接就好! 🍒修改板娘触摸提示词我们在用鼠标点击板娘身体时,头顶会有提示词。也是可以修改的哦! 依旧是打开js文件中的pio.js,可以找到以下代码: // 触摸 touch: function () { current.canvas.onclick = function () { modules.render(prop.content.touch || ["你在干什么?","干嘛动我呀!小心我咬你!","非礼呀!救命!","再摸的话我可要报警了⌇●﹏●⌇","是···是不小心碰到了吧~~~","110 吗,这里有个变态一直在摸我(ó﹏ò)", "HENTAI!", "不可以这样欺负我啦!","萝莉控是什么呀?", "你看到我的小熊了吗?"]); }; },在 modules.render中的列表中修改你的提示词!(各位不要开车哦~~~) 🍑bug解决上面的自定义就写这些,如果还有要修改的,自己去看看源代码哦!下面我来说说一个bug。 我在拿到这个代码时,当时他这个库l2d.js运行起来总是报错,报错内容大改就是我点击当前页面,控制台这个7000多行的js库总是报错,但是不影响项目。对于这个控制台报错我看着难受,然后就网上找办法处理了,嘿嘿嘿~~~ 在l2d.js文件最后加入以下代码: function ResumeError() { return true; } window.onerror = ResumeError;这三行代码可以帮助我们忽略l2d.js文件的报错! 🍑在你的woldpress博客中引入板娘博主的博客是用woldpress搭建的,主题是Sakura。 在wp-content/themes/sakura中有个footer.php文件夹,如下图,将代码添加进去就行,然后将静态资源上传到你的博客项目,在model中将路径写对就行。 插入到html中的代码上面已经展示了,接下来我把静态资源放到网盘中,大家自己去提取吧! 链接:https://pan.baidu.com/s/174mg1s0Fe3kn8onAIy3DiA 提取码:waan 博主csdn主页资源中也上传了一份,审核通过后也可以去下载! 🍊结语如果你觉得博主写的还不错的话,可以关注一下当前专栏,博主会更完这个系列的哦!也欢迎订阅博主的其他好的专栏。 🏰系列专栏 👉flask框架快速入门 👉java 小白到高手的蜕变 其他专栏请前往博主主页查看! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |